<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <title>动态更新和删除列表项</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            background-color: #f4f4f4;  
            margin: 0;  
            padding: 20px;  
        }  
        h1 {  
            text-align: center;  
            color: #333;  
        }  
        ul {  
            list-style-type: none;  
            padding: 0;  
            max-width: 600px;  
            margin: 20px auto;  
            background: white;  
            border-radius: 5px;  
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
        }  
        li {  
            padding: 15px;  
            border-bottom: 1px solid #ddd;  
            display: flex;  
            justify-content: space-between;  
            align-items: center;  
            position: relative;  
        }  
        li:last-child {  
            border-bottom: none;  
        }  
        button {  
            background-color: #007BFF;  
            color: white;  
            border: none;  
            border-radius: 5px;  
            padding: 8px 12px;  
            cursor: pointer;  
            transition: background-color 0.3s;  
        }  
        button:hover {  
            background-color: #0056b3;  
        }  
        input[type="text"] {  
            padding: 10px;  
            width: 500px;  
            border: 1px solid #ccc;  
            border-radius: 5px;  
            margin-right: 10px;  
        }  
        .input-content {  
            display: flex;  
            justify-content: center;  
            margin-top: 20px;  
        }  
        .edit-input {  
            position: absolute;  
            left: 0;  
            right: 100px; /* Leave space for buttons */  
            width: auto;  
        }  
    </style>  
</head>  
<body>  
    <h1>动态列表管理</h1>  
    <ul id="myList"></ul>  
    <div class="input-content">  
        <input type="text" id="itemInput" placeholder="新项">  
        <button id="addItem">添加项</button>  
    </div>  
  
    <script>  
        document.getElementById('addItem').addEventListener('click', function() {  
            const inputValue = document.getElementById('itemInput').value;  
            if (inputValue.trim() !== '') {  
                const list = document.getElementById('myList');  
                const li = document.createElement('li');  
                li.textContent = inputValue;  
  
                const editButton = document.createElement('button');  
                editButton.textContent = '编辑';  
                editButton.addEventListener('click', function() {  
                    const editInput = document.createElement('input');  
                    editInput.type = 'text';  
                    editInput.value = li.textContent;  
                    editInput.className = 'edit-input';  
                    editInput.addEventListener('blur', function() {  
                        li.textContent = editInput.value;  
                        li.removeChild(editInput);  
                        const deleteButton = document.createElement('button');  
                        deleteButton.textContent = '删除';  
                        deleteButton.addEventListener('click', function() {  
                            list.removeChild(li);  
                        });  
                        li.appendChild(deleteButton);  
                    });  
                    li.textContent = '';  
                    li.appendChild(editInput);  
                    li.appendChild(editButton);  
                    editButton.remove(); // Remove the original edit button after placing the input  
                });  
  
                const deleteButton = document.createElement('button');  
                deleteButton.textContent = '删除';  
                deleteButton.addEventListener('click', function() {  
                    list.removeChild(li);  
                });  
  
                li.appendChild(editButton);  
                li.appendChild(deleteButton);  
                list.appendChild(li);  
  
                document.getElementById('itemInput').value = '';  
            }  
        });  
    </script>  
</body>  
</html>